<template>
  <div>
    <div class="staff_cont">
      <div class="staffleak_serch">
        <el-form class="table_serch">
          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">起始日期</div>
            <el-form-item label="">
              <StartTime :formInline="formInline"></StartTime>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">结束日期</div>
            <el-form-item label="">
              <Endtime  :formInline="formInline"></Endtime>
            </el-form-item>
          </div>

          <div class="upload-demo_box" style="margin-top: 10px">
            <el-upload
              ref="upload"
              action="#"
              :limit="limitNum"
              :auto-upload="false"
              accept=".xlsx"
              multiple
              :before-upload="beforeUpload"
              :http-request="uploadFile"
              :on-preview="handlePreview"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="formInline.fileList"
            >
              <el-button
                type="primary"
                style="height: 30px; margin-top: 5px"
                size="small"
                >上传产品二维码</el-button
              >
              <div slot="tip" class="el-upload__tip">
                <!-- 只能上传jpg/png文件，且不超过500kb -->
              </div>
            </el-upload>
          </div>

           <div class="table_serch_dow" style="margin-top:10px">
               <Dowtemplte :DowUrl="DowUrl"></Dowtemplte>
           </div>

          <div class="table_serch_labe">
            <el-button
              type="primary"
              size="mini"
              style="height: 30px; margin-top: 5px"
              @click="staffleakclick"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>

      <div class="staff_bar">
        <div id="staff_hader_bar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Dowtemplte from '../../../components/Dowtemplate/Dowtemplate'
import Endtime from '../../../components/endTime/Endtime'
import StartTime from '../../../components/StarTime/StartTime'
export default {
  components:{
      Dowtemplte,
      Endtime,
      StartTime
  },
  data() {
    return {
        DowUrl:"/file/local?filename=templates/1024.xlsx",
      formInline: {
        starttime: "",
        endtime: "",
        filename: "",
      },
      limitNum: 1,
      theme: "上传表格",
      devState: [],
      xAis: [],
      per: [],
    };
  },

  methods: {
    staffleakclick() {
      if (this.formInline.starttime == "") {
        this.$message({
          showClose: true,
          message: "起始日期不能为空",
          type: "warning",
        });
      } else if (this.formInline.endtime == "") {
      this.$message({
          showClose: true,
          message: "结束日期不能为空",
          type: "warning",
        });
      } else if (this.formInline.endtime < this.formInline.starttime) {
     this.$message({
          showClose: true,
          message: "结束日期不能小于起始日期",
          type: "warning",
        });
      }else if(this.formInline.filename==''){
        this.$message({
          showClose: true,
          message: "必须上传PNL_ID信息",
          type: "warning",
        });
      }else {
        this.ajax
          .get(
            `prod/1024?starttime=${this.formInline.starttime}&endtime=${this.formInline.endtime}&filename=${this.formInline.filename}`
          )
          .then((res) => {
            console.log(res.data);
            this.devState = res.data.leakDate;
            this.xAis = res.data.xAis;
            this.per = res.data.xAisPer;
            if (this.devState.length) {
              var char_1 = this.$echarts.init(
                document.getElementById("staff_hader_bar")
              );
              char_1.dispose();
              this.devStateBar();
            } else {
              this.$message({
                showClose: true,
                message: "数据返回为空，请重新重新请求",
                type: "error",
              });
              setTimeout(() => {
                this.$router.go(0);
              }, 300);
            }
          });
      }
    },

    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },

    // 文件状态改变
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      this.formInline.filename = file.name;
      this.uploadfiles();
      // if (file) {
      //   setTimeout(() => {
      //     this.$message({
      //       message: "文件上传成功",
      //       type: "success",
      //     });
      //   }, 1000);
      // }
    },

    // 文件超出个数限制
    handleExceed(files, fileList) {
      // console.log(filea)
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },

    uploadFile(file) {
      this.formData.append("file", file.file);
    },

    //上传文件接口
    uploadfiles() {
      let files = new FormData();
      files.append("theme", this.theme);
      for (let i = 0; i < this.fileList.length; i++) {
        files.append("files", this.fileList[i].raw);
      }
      this.ajax.post("upload", files, {}).then((res) => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
            message: "文件上传成功",
            type: "success",
          });
        }
      });
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      // this.formInline.fileList.shift();
      this.fileList.shift();
      // console.log('=---------',this.fileList)
    },

    handlePreview(file) {
      console.log(file);
    },
    ///柱状图
    devStateBar() {
      let mysvg = this.$echarts.init(
        document.getElementById("staff_hader_bar")
      );
      //    console.log("获取柱状图数据q111111111111", this.devState);
      let dataname = [];
      let datalist = [];
      let titlename = [];
      let list = [];
      let perlist = [];

      for (let i = 0; i < this.devState.length; i++) {
        dataname.push(this.devState[i].key);
        datalist = this.devState[i].val;
      }
      // console.log("---------", datalist);

      for (let i = 0; i < datalist.length; i++) {
        titlename.push(datalist[i].key);
      }

      for (let i = 0; i < this.per.length; i++) {
        perlist.push(this.per[i].val);
      }

      this.devState.forEach((ele) => {
        list.push(
          {
            name: ele.key,
            data: ele.val.map((item) => {
              return item;
            }),
            type: "bar",
            stack: "a",
            barWidth: "10%",
            // barCateGoryGap: "30%",
            label: {
              position: "insideRight",
              normal: {
                // show:true, //是否显示
                // formatter: "{a}{b}:{c}%",
              },
            },
          },
          {
            type: "line",
            data: perlist,
            yAxisIndex: 1,
            label: {
              normal: {
                show: true,
                position: "insideRight",
                formatter: function (params) {
                  //标签内容
                  return params.value + "%";
                },
              },
            },
          }
        );
      });
      // console.log("----------------柱状图数据", list);

      var option = {
        option: true,

        title: [
          {
            text: "人员漏检统计",
            x: "center",
            y: "5%",
            textStyle: {
              fontSize: 15,
              fontWeight: 400,
            },
          },
          {
            subtext: "纵轴单位(个数)",
            subtextStyle: {
              align: "left",
              lineHeight: 66,
              fontSize: 10,
              padding: 25,
            },
          },
        ],
        tooltip: {
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5;
            } else {
              // 左边放的下
              x = pointX - boxWidth;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5;
            } else {
              // 上边放得下
              y = pointY - boxHeight;
            }

            return [x, y];
          },
          trigger: "item",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: dataname,
          type: "scroll",
          top: "13%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          // height: 380,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.xAis,
        },
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
            min: 0,
            max: 100,
            interval: 50,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "#000",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: true,
            start: 0,
            end: 100,
            handleSize: 8,
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            type: "slider",
            show: true,
            yAxisIndex: 0,
            filterMode: "empty",
            width: 12,
            height: "70%",
            handleSize: 8,
            showDataShadow: false,
            left: "93%",
          },
        ],
        series: list,
      };
      mysvg.setOption(option);
      window.addEventListener("resize", function () {
        mysvg.resize();
      });
    },
  },
};
</script>

<style  scoped>
.staff_cont {
  width: 100%;
}
.staffleak_serch {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}
.table_serch {
  width: 60%;
  display: flex;
  justify-content: space-around;
}
.table_serch_labe {
  /* border:1px solid #000; */
  height: 40px;
  display: flex;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.staff_bar {
  width: 100%;
  background: #ffffff;
  margin-top: 30px;
}
#staff_hader_bar {
  width: 100%;
  height: 70vh;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}
</style>
